<template>
	<view class="page">
		<view class="tcard">
			<view class="title">
				就诊人信息
			</view>
			<view class="user-list">
				<view class="user" :class="{active: item.loginStatus === 1}" v-for="item in userList" :key="item.id"
					@click="changeUser(item.patId)">
					{{item.name}}
				</view>
				<view class="user" @click="toAddPat">
					+ 添加
				</view>
			</view>
		</view>
		<input type="text">
		<view class="tcard">
			<view class="title">
				体检信息
			</view>
			<view class="tform">
				<view class="tform-item">
					<view class="label">
						体检地址
					</view>
					<view class="value">
						西南财大校医院
					</view>
				</view>
				<view class="tform-item">
					<view class="label">
						套餐名称
					</view>
					<view class="value">
						{{ pkg.pkgName }}
					</view>
				</view>
				<view class="tform-item">
					<view class="label">
						自选项目
					</view>
					<view class="value">
						{{checkItems.length}}项
					</view>
				</view>
				<view class="tform-item">
					<view class="label">
						体检时间
					</view>
					<view class="value" @click="toCheckTime">
						{{ choseTime.quantityId ? choseTime.time : '请选择体检时间 >' }}
					</view>
				</view>
				<view class="tform-item" style="border: none;">
					<view class="label">
						体检项明细
					</view>
					<view class="value" @click="toMingxi">
						项目明细 >
					</view>
				</view>
			</view>
		</view>

		<view class="tcard">
			<view class="title swi-box">
				电子报告授权
				<switch class="switch" color="#215186" @change="switchChange" />
			</view>
		</view>

		<view class="check-box">
			<radio :disabled="!swi" :checked="check" @click="checkChange" />
			<view class="check-txt">本人确认，上述人员已明确授权本人于健康服务平台（简称“本平台”）预约体检，查看体检报告、获得健康服务；否则，本人将承担由此给“本平台”及上述人员造成的一切后果。
			</view>
		</view>

		<view class="pay">
			<view class="">
				实付：
				<text class="money">
					¥{{ pkg.money + checkItems.reduce((sum, e) => sum + Number(e.itemAmt || 0), 0) | fixed}}
				</text>
			</view>
			<view class="btn" @click="submit">
				支付，并预约
			</view>
		</view>
		<Load :load="load" />
	</view>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	import {
		subItems,
		getNumberSource
	} from '@/api/physical.js'
	export default {
		data() {
			return {
				load: false,
				pkg: {},
				checkItems: [],
				swi: false,
				check: false,
				choseTime: {}
			};
		},
		computed: {
			...mapGetters(['userInfo', 'userList']),
		},
		onLoad(opt) {
			this.pkg = JSON.parse(opt.pkg)
			this.checkItems = JSON.parse(opt.checkItems)
		},
		methods: {
			...mapActions(['changeUser']),
			toMingxi() {
				uni.navigateTo({
					url: `../Mingxi/Mingxi?checkItems=${JSON.stringify(this.checkItems)}&pkg=${JSON.stringify(this.pkg)}`,
				})
			},
			toAddPat() {
				uni.navigateTo({
					url: `/pages/Login/addPatient`,
				})
			},
			toCheckTime() {
				uni.navigateTo({
					url: `../CheckTime/CheckTime`,
				})
			},
			switchChange(e) {
				this.swi = e.detail.value
				if (!this.swi) {
					this.check = false
				}
			},
			checkChange() {
				if (!this.swi) {
					return this.$u.toast('请先允许电子报告授权')
				}
				this.check = !this.check
			},
			submit() {
				if (!this.check) return this.$u.toast('请先勾选')
				if (!this.userInfo) return this.$u.toast('请先添加就诊人')
				if (!this.choseTime.quantityId) return this.$u.toast('请先选择时间')
				this.load = true
				const data = {
					type: 1,
					userName: this.userInfo.name,
					examineeIcno: this.userInfo.idCard,
					// gender: this.userInfo.sex, // 
					// gender: 'M', // 
					gender: this.pkg.gender, // 
					birthday: this.userInfo.idCard.substring(6, 14),
					age: new Date().getFullYear() - this.userInfo.idCard.substring(6, 10),
					examineePhone: this.userInfo.examineePhone, // 
					pkgCode: this.pkg.pkgCode,
					pkgName: this.pkg.pkgName,
					basePkgReceivableAmt: this.pkg.receivableMoney + '',
					basePkgAmt: this.pkg.itemList.reduce((sum, e) => sum + Number(e.itemAmt || 0), 0) + '',
					packageItems: this.pkg.itemList,

					reserveType: 1,
					// reserveTime: '2024-08-27 00:01:01', // 
					reserveTime: this.choseTime.time + ':00', // 
					quantityId: this.choseTime.quantityId,

					addPkgAmt: (this.checkItems.reduce((sum, e) => sum + Number(e.itemAmt || 0), 0)).toFixed(2),
					addPkgReceivableAmt: (this.checkItems.reduce((sum, e) => sum + Number(e.itemReceivableAmt || 0),
						0)).toFixed(2),
					addItemList: this.checkItems,
					amount: (this.pkg.money + this.checkItems.reduce((sum, e) => sum + Number(e.itemAmt || 0), 0))
						.toFixed(2),

					examineePhone: this.userInfo.phoneNumber
				}
				subItems(data).then(res => {
					console.log(res)
					uni.navigateTo({
						url: `../Cashier/Cashier?amount=${this.pkg.money + this.checkItems.reduce((sum, e) => sum + Number(e.itemAmt || 0), 0)}
            &time=${data.reserveTime}&pkg=${JSON.stringify(this.pkg)}&orderId=${res}&checkItems=${JSON.stringify(this.checkItems)}`
					})
				}).finally(() => {
					this.load = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-list {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-top: 32upx;
		flex-wrap: wrap;
		gap: 32upx;

		.user {
			width: 130upx;
			height: 54upx;
			text-align: center;
			line-height: 54upx;
			background: #FFFFFF;
			border-radius: 8upx;
			border: 1px solid rgba(0, 0, 0, 0.16);
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24upx;
			color: rgba(0, 0, 0, 0.24);

			&.active {
				position: relative;
				border-color: $theme-color;
				color: $theme-color;

				&:before {
					content: '';
					position: absolute;
					right: 0;
					top: 0;
					border: 20upx solid $theme-color;
					border-bottom-color: transparent;
					border-left-color: transparent;
				}

				&:after {
					content: '';
					width: 5upx;
					height: 12upx;
					position: absolute;
					right: 6upx;
					top: 6upx;
					border: 1px solid #fff;
					border-top-color: transparent;
					border-left-color: transparent;
					transform: rotate(45deg);
				}
			}
		}
	}

	.swi-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 0;

		.switch {
			transform: scale(0.7)
		}
	}

	.check-box {
		display: flex;
		justify-content: flex-start;

		::v-deep.uni-radio-input {
			width: 32upx;
			height: 32upx;
		}

		.check-txt {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 20upx;
			color: rgba(0, 0, 0, 0.7);
			margin-left: 12upx;
		}
	}

	.pay {
		width: 100vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		height: 108upx;
		padding: 0 32upx;
		box-shadow: 0px -8px 76px 22px rgba(227, 237, 255, 0.58);
		background-color: #FFF;

		.cross {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28upx;
			color: #DADADA;
			line-height: 48upx;
			text-decoration: line-through;
			margin-left: 10upx;
		}

		.btn {
			width: 240upx;
			height: 64upx;
			background: #366AA4;
			border-radius: 64upx;
			text-align: center;
			line-height: 64upx;
			color: #FFF;
		}
	}

	.money {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 32upx;
		color: #FFAA32;
		line-height: 44upx;
	}
</style>